<template>
    <div class="aside-left">
        <div class="user-img">
            <el-image :src="url">
                <div slot="error" class="image-slot">
                </div>
            </el-image>
        </div>
        <div class="menu">
            <el-menu default-active="1" class="el-menu-vertical" @select="handleSelect" background-color="#ACDED2">
                <el-menu-item index="1">
                    <i class="aside-icon aside-icon-home" v-bind:class="{ 'active1': isActive1 }"></i>
                </el-menu-item>
                <el-menu-item index="2">
                    <i class="aside-icon aside-icon-document" v-bind:class="{ 'active2': isActive2 }"></i>
                </el-menu-item>
                <el-menu-item index="3">
                    <i class="aside-icon aside-icon-config" v-bind:class="{ 'active3': isActive3 }"></i>
                </el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script>
const { ipcRenderer } = window.require('electron')
import { mapGetters } from "vuex";
export default {
    name: 'AsideLeft',
    data() {
        return {
            isActive1: true,
            isActive2: false,
            isActive3: false,
            url: ''
        }
    },
    created() {
        // 过早的请求貌似会失败,可能是还没获取到key,先加一个定时器解决
        setTimeout(() => {
            this.getUserImg()
        }, 500)
    },
    methods: {
        ...mapGetters(['getStoreUserInfo']),
        handleSelect(key, keyPath) {
            switch (key) {
                case '1':
                    this.isActive1 = true
                    this.isActive2 = false
                    this.isActive3 = false
                    this.$router.push('/home');
                    break;
                case '2':
                    this.isActive1 = false
                    this.isActive2 = true
                    this.isActive3 = false
                    this.$router.push('/document');
                    break;
                case '3':
                    this.isActive1 = false
                    this.isActive2 = false
                    this.isActive3 = true
                    this.$router.push('/config');
                    break;
            }
        },
        // 获取用户头像
        async getUserImg() {
            // 获取存在仓库里的头像Id
            const profileIconId = this.getStoreUserInfo().profileIconId
            // 目前没有想到怎么在进程之间穿图片
            // 现在返回的是base64编码数据,img标签可以直接调用,但是会使图片体积增大
            const result = ipcRenderer.sendSync('getUserImg:vue', { profileIconId })
            this.url = 'data:image/png;base64,' + result
        }
    }
}
</script>

<style lang="scss" scoped>
.aside-left {
    display: flex;
    flex-direction: column;
    width: 60px;
    height: 100%;
    background-color: #ACDED2;
    border-radius: 10px 0 0 10px;
    // 该区域可以鼠标拖动,需要在无边框模式下
    -webkit-app-region: drag;


    .user-img {
        padding: 5px;
        height: 60px;
        // 无视padding  盒子总宽高固定
        box-sizing: border-box;

        .el-image {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            background-color: #fff;
        }
    }

    .menu {
        padding: 20px 0 0 0;
        box-sizing: border-box;
        // 该区域不可以鼠标拖动,需要在无边框模式下
        -webkit-app-region: no-drag;

        // 穿透样式+!important
        .el-menu-vertical ::v-deep .el-menu-item:hover {
            background-color: #ACDED2 !important;
        }

        .aside-icon {
            display: inline-block;
            width: 22px;
            height: 22px;
        }

        .aside-icon-home {
            background-image: url(../assets/aside-home.svg);
            // 缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
            background-size: contain;
        }

        .aside-icon-document {
            background-image: url(../assets/aside-document.svg);
            // 缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
            background-size: contain;
        }

        .aside-icon-config {
            background-image: url(../assets/aside-config.svg);
            // 缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
            background-size: contain;
        }

        .active1 {
            background-image: url(../assets/aside-home-active.svg);
            // 缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
            background-size: contain;
        }

        .active2 {
            background-image: url(../assets/aside-document-active.svg);
            // 缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
            background-size: contain;
        }

        .active3 {
            background-image: url(../assets/aside-config-active.svg);
            // 缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
            background-size: contain;
        }
    }


}
</style>